/* eslint-disable no-unused-vars */
/* eslint-disable no-undef */
import {
  GithubFilled,
  InfoCircleFilled,
  LogoutOutlined,
  QuestionCircleFilled,
  PlusOutlined,
  SmileFilled,
  EditFilled,
} from "@ant-design/icons";
import {
  PageContainer,
  ProCard,
  ProConfigProvider,
  ProLayout,
  SettingDrawer,
} from "@ant-design/pro-components";
import { Button, ConfigProvider, Dropdown, Modal, FloatButton } from "antd";
import React, { useMemo, useState } from "react";
import TreeRender from "@/components/TreeRender";
import { useModel } from "umi";
import Pages from "./pagecontianer";

function findObjectByPath(arr, targetPath, currentId = "") {
  // 递归基础情况：如果数组为空或者当前对象的id等于目标id，返回该对象
  if (!arr.length || currentId === targetPath) {
    return arr.find((obj) => obj.id === targetPath);
  }

  // 遍历数组中的每个对象
  for (let i = 0; i < arr.length; i++) {
    const obj = arr[i];

    // 如果对象有children属性，继续在children中递归搜索
    if (obj.routes && obj.routes.length) {
      const foundObj = findObjectByPath(obj.routes, targetPath, obj.path);
      if (foundObj) {
        return foundObj;
      }
    }

    // 如果对象的id等于目标id，返回该对象
    if (obj.path === targetPath) {
      return obj;
    }
  }

  // 如果没有找到匹配的id，返回null
  return null;
}

export default () => {
  const {
    initialState: { routerData, extralayout },
    setInitialState,
  } = useModel("@@initialState");

  const [settings, setSetting] = useState({
    fixSiderbar: true,
    layout: "mix",
    splitMenus: true,
  });

  const [pathname, setPathname] = useState("/welcome");

  const [modal, setModal] = useState({
    open: false,
    onCancel: () => {
      setModal((s) => ({
        ...s,
        open: false,
      }));
    },
  });

  const [dom, setDom] = useState(null);

  const routedata = findObjectByPath(routerData, pathname);


  return (
    <div
      id="test-pro-layout"
      style={{
        height: "100vh",
        overflow: "auto",
      }}
    >
      <Modal {...modal}>
        <div style={{ padding: 12 }}>
          <p className="ltitle">
            <b>系统页面配置</b>
            {dom}
          </p>
          <TreeRender dataSource={routerData} setDom={setDom}></TreeRender>
        </div>
      </Modal>
      <ProConfigProvider hashed={false}>
        <ConfigProvider
          getTargetContainer={() => {
            return document.getElementById("test-pro-layout") || document.body;
          }}
        >
          <ProLayout
            {...extralayout}
            prefixCls="my-prefix"
            route={{
              path: "/",
              routes: routerData,
            }}
            bgLayoutImgList={[
              {
                src: "https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png",
                left: 85,
                bottom: 100,
                height: "303px",
              },
              {
                src: "https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png",
                bottom: -68,
                right: -45,
                height: "303px",
              },
              {
                src: "https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png",
                bottom: 0,
                left: 0,
                width: "331px",
              },
            ]}
            location={{
              pathname,
            }}
            token={{
              header: {
                colorBgMenuItemSelected: "rgba(0,0,0,0.04)",
              },
            }}
            siderMenuType="group"
            menu={{
              collapsedShowGroupTitle: true,
            }}
            avatarProps={{
              src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
              size: "small",
              title: "七妮妮",
            }}
            actionsRender={(props) => {
              if (props.isMobile) return [];
              if (typeof window === "undefined") return [];
              return [
                <InfoCircleFilled key="InfoCircleFilled" />,
                <QuestionCircleFilled key="QuestionCircleFilled" />,
                <GithubFilled key="GithubFilled" />,
              ];
            }}
            appList={[
              {
                icon: "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
                title: "Ant Design",
                desc: "杭州市较知名的 UI 设计语言",
                url: "https://ant.design",
              },
              {
                icon: "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
                title: "AntV",
                desc: "蚂蚁集团全新一代数据可视化解决方案",
                url: "https://antv.vision/",
                target: "_blank",
              },
              {
                icon: "https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg",
                title: "Pro Components",
                desc: "专业级 UI 组件库",
                url: "https://procomponents.ant.design/",
              },
              {
                icon: "https://img.alicdn.com/tfs/TB1zomHwxv1gK0jSZFFXXb0sXXa-200-200.png",
                title: "umi",
                desc: "插件化的企业级前端应用框架。",
                url: "https://umijs.org/zh-CN/docs",
              },

              {
                icon: "https://gw.alipayobjects.com/zos/bmw-prod/8a74c1d3-16f3-4719-be63-15e467a68a24/km0cv8vn_w500_h500.png",
                title: "qiankun",
                desc: "可能是你见过最完善的微前端解决方案🧐",
                url: "https://qiankun.umijs.org/",
              },
              {
                icon: "https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg",
                title: "语雀",
                desc: "知识创作与分享工具",
                url: "https://www.yuque.com/",
              },
              {
                icon: "https://gw.alipayobjects.com/zos/rmsportal/LFooOLwmxGLsltmUjTAP.svg",
                title: "Kitchen ",
                desc: "Sketch 工具集",
                url: "https://kitchen.alipay.com/",
              },
              {
                icon: "https://gw.alipayobjects.com/zos/bmw-prod/d3e3eb39-1cd7-4aa5-827c-877deced6b7e/lalxt4g3_w256_h256.png",
                title: "dumi",
                desc: "为组件开发场景而生的文档工具",
                url: "https://d.umijs.org/zh-CN",
              },
            ]}
            headerTitleRender={(logo, title, _) => {
              const defaultDom = (
                <a>
                  {logo}
                  {title}
                </a>
              );
              return <>{defaultDom}</>;
            }}
            menuFooterRender={(props) => {
              if (props.collapsed) return undefined;
              return (
                <div
                  style={{
                    textAlign: "center",
                    paddingBlockStart: 12,
                  }}
                >
                  <div>© 2021 Made with love</div>
                  <div>by Ant Design</div>
                </div>
              );
            }}
            onMenuHeaderClick={(e) => console.log(e)}
            menuItemRender={(item, dom) => (
              <div
                onClick={() => {
                  setPathname(item.path || "/welcome");
                }}
              >
                {dom}
              </div>
            )}
            {...settings}
          >
            <Pages
              routedata={routedata}
              eidtpage={()=>{
                setModal((s) => ({
                  ...s,
                  title: "编辑页面",
                  open: true,
                }));
              }}
            ></Pages>
          
            {/* <SettingDrawer
              pathname={pathname}
              enableDarkTheme
              getContainer={(e) => {
                if (typeof window === "undefined") return e;
                return document.getElementById("test-pro-layout");
              }}
              settings={settings}
              onSettingChange={(changeSetting) => {
                setSetting(changeSetting);
              }}
              disableUrlParams={false}
            /> */}
          </ProLayout>
        </ConfigProvider>
      </ProConfigProvider>
    </div>
  );
};
